<template>
	<div class="MobileHome">
		<div class="banner">
			<el-carousel :interval="2000" arrow="nerver" height="15rem">
			    <el-carousel-item v-for="item in hotlist" :key="item.id">
			      <img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`"/>
			    </el-carousel-item>
			  </el-carousel>
		</div><!-- 轮播图 -->
	<MobileHomelist :proplist='catelist' proptitle='热门推荐'></MobileHomelist>
	<br />
	<MobileHomelist :proplist='catelist' proptitle='新书上市'></MobileHomelist>
	</div>
</template>

<script>
	import MobileHomeSwiper from '@/components/mobile/home/MobileHomeSwiper.vue'
	import MobileHomelist from '@/components/mobile/home/MobileHomelist.vue'
	export default {
		name:'MobileHome',
		components:{
		MobileHomeSwiper,
		MobileHomelist
		},
		data() {
			return {
				homelist: [],
				bookslist: [],
				catelist:[],
				Hottype:1,
				Hotnum:6,
				TopSalenum:20,
				hotlist:[],
				newslist: []
			}
		},
		methods:{
			
		},
		created() {
			
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/6").then((resp)=>{
					resp.data.data.forEach((item)=>{
						this.hotlist.push(item);
					})
					console.log(this.hotlist)
				})
			this.$axios.get('/api/public/findHot/' + this.Hottype + '/' + this.Hotnum).then((res) => { //轮播图
				if (res.status == 200) {
					this.homelist = res.data.data
				}
			}).catch((error) => {
				console.log(error);
			})
			this.$axios.get('api/public/book/findTopSale/'+this.TopSalenum).then((res1) => {//热门推荐
				if (res1.status == 200) {
					console.log(res1.data.data);
					this.catelist = res1.data.data;
					
				}
			}).catch((error) => {
				console.log(error);
			})
		},
		mounted() {
			
			if (this._isMobile()) {
				// alert("手机端");
				this.$router.push('/mobile/home');
			} else {
				// alert("pc端");
				this.$router.push('/pc/home');
			}
			// this.getHotBook();
		},
		methods: {
			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
					)
				return flag;
			}
		
		}

	}
</script>

<style scoped>
	.mobile_home {
		position: relative;
		top: 56px;
		background-color: #f5d5a0;
	}
	.banner{
		width: 100%;
		height: 15rem;
		background-color: orange;
	}
	.banner img{
		width: 100%;
		height: 100%;
	}
	.banner .el-carousel /deep/.el-carousel__button{
		height: 5px !important;
	}
	.banner .el-carousel /deep/.is-active .el-carousel__button{
		background-color: #a68b5b !important;
	}
</style>